90:I[903690,["/chat-static/_next/static/chunks/0rt9odizr-jjb.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/3ite267mjat-0.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/035w0wg2gxyor.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/0mi4y0w4pl0wu.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/2q7fs4m_uamv5.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/14v7b-gixg9wk.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/16d-sm-uvlj85.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/1jfrn9u40szv6.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/41fykybko3c-s.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/34jb4285p3p7e.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/43tm4sfuv-bre.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/2sjnzs7s258hc.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/36289i9wjcw91.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/3szdt-heown_b.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/3xjlw3nohwgaz.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/1z4v54v0ctlnj.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/1xdkpdc84l3q9.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/0w7-fmksgb7nb.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/09cqs19p81kqd.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/3lzqzvqvppdbz.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/3wi82p7qvjxfb.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/2gumkeigv5cf6.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/07ek7rah7ke6w.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/1zmjnc028c2fv.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/25n_i-5l5l5ey.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/1q89dw-c_44o_.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/2cjw3-k1vrcs3.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/1lq145b3vyg4-.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/2kohmem-6ngwr.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/1d5cm3g8z-wmq.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/1-okd7udhalq3.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/3qg3qz7pjnemd.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/1ywag30-9ka99.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/3bbsz6yb3u_4l.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/2vn53p8-7ln-n.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/29z3h6t0tfllm.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/0g1vo6dajj3ur.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/0_o46o_pl393e.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/2vk7zslp0se6a.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/2e_g7o1snt_96.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/2_ncwtp5_4p4i.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/3xhe4ju57na2c.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/112s1d0t63y17.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/0bgbfks22job0.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj"],"ExplicitChatIdProvider"] 91:I[838238,["/chat-static/_next/static/chunks/0rt9odizr-jjb.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/3ite267mjat-0.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/035w0wg2gxyor.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/0mi4y0w4pl0wu.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/2q7fs4m_uamv5.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/14v7b-gixg9wk.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/16d-sm-uvlj85.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/1jfrn9u40szv6.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/41fykybko3c-s.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/34jb4285p3p7e.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/43tm4sfuv-bre.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/2sjnzs7s258hc.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/36289i9wjcw91.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/3szdt-heown_b.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/3xjlw3nohwgaz.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/1z4v54v0ctlnj.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/1xdkpdc84l3q9.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/0w7-fmksgb7nb.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/09cqs19p81kqd.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/3lzqzvqvppdbz.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/3wi82p7qvjxfb.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/2gumkeigv5cf6.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/07ek7rah7ke6w.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/1zmjnc028c2fv.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/25n_i-5l5l5ey.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/1q89dw-c_44o_.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/2cjw3-k1vrcs3.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/1lq145b3vyg4-.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/2kohmem-6ngwr.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/1d5cm3g8z-wmq.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/1-okd7udhalq3.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/3qg3qz7pjnemd.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/1ywag30-9ka99.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/3bbsz6yb3u_4l.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/2vn53p8-7ln-n.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/29z3h6t0tfllm.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/0g1vo6dajj3ur.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/0_o46o_pl393e.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/2vk7zslp0se6a.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/2e_g7o1snt_96.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/2_ncwtp5_4p4i.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/3xhe4ju57na2c.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/112s1d0t63y17.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/0bgbfks22job0.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj"],"SWRDataProvider"] 92:T349e,[V0_FILE]typescriptreact:file="components/kokonutui/smooth-tab.tsx" isEdit="true" isQuickEdit="true" "use client" import * as React from "react" import { AnimatePresence, motion } from "motion/react" import { cn } from "@/lib/utils" import type { LucideIcon } from "lucide-react" import Link from "next/link" interface TabItem { id: string title: string icon?: LucideIcon content?: React.ReactNode cardContent?: React.ReactNode color: string } const WaveformPath = () => ( ) const DEFAULT_TABS: TabItem[] = [ { id: "Models", title: "Models", color: "bg-blue-500 hover:bg-blue-600", cardContent: (

Models

Choose the model you want to use

), }, { id: "MCPs", title: "MCPs", color: "bg-purple-500 hover:bg-purple-600", cardContent: (

MCPs

Choose the MCP you want to use

), }, { id: "Agents", title: "Agents", color: "bg-emerald-500 hover:bg-emerald-600", cardContent: (

Agents

Choose the agent you want to use

), }, { id: "Users", title: "Users", color: "bg-amber-500 hover:bg-amber-600", cardContent: (

Users

Choose the user you want to use

), }, ] interface SmoothTabProps { items?: TabItem[] defaultTabId?: string className?: string activeColor?: string onChange?: (tabId: string) => void } const slideVariants = { enter: (direction: number) => ({ x: direction > 0 ? "100%" : "-100%", opacity: 0, filter: "blur(8px)", scale: 0.95, position: "absolute" as const, }), center: { x: 0, opacity: 1, filter: "blur(0px)", scale: 1, position: "absolute" as const, }, exit: (direction: number) => ({ x: direction < 0 ? "100%" : "-100%", opacity: 0, filter: "blur(8px)", scale: 0.95, position: "absolute" as const, }), } const transition = { duration: 0.4, ease: [0.32, 0.72, 0, 1], } export default function SmoothTab({ items = DEFAULT_TABS, defaultTabId = DEFAULT_TABS[0].id, className, activeColor = "bg-[#1F9CFE]", onChange, }: SmoothTabProps) { const [selected, setSelected] = React.useState(defaultTabId) const [direction, setDirection] = React.useState(0) const [dimensions, setDimensions] = React.useState({ width: 0, left: 0 }) // Reference for the selected button const buttonRefs = React.useRef>(new Map()) const containerRef = React.useRef(null) // Update dimensions whenever selected tab changes or on mount React.useLayoutEffect(() => { const updateDimensions = () => { const selectedButton = buttonRefs.current.get(selected) const container = containerRef.current if (selectedButton && container) { const rect = selectedButton.getBoundingClientRect() const containerRect = container.getBoundingClientRect() setDimensions({ width: rect.width, left: rect.left - containerRect.left, }) } } // Initial update requestAnimationFrame(() => { updateDimensions() }) // Update on resize window.addEventListener("resize", updateDimensions) return () => window.removeEventListener("resize", updateDimensions) }, [selected]) const handleTabClick = (tabId: string) => { const currentIndex = items.findIndex((item) => item.id === selected) const newIndex = items.findIndex((item) => item.id === tabId) setDirection(newIndex > currentIndex ? 1 : -1) setSelected(tabId) onChange?.(tabId) } const handleKeyDown = (e: React.KeyboardEvent, tabId: string) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault() handleTabClick(tabId) } } const selectedItem = items.find((item) => item.id === selected) return (

{/* Card Content Area */}

{selectedItem?.cardContent}

{/* Bottom Toolbar */}

{/* Sliding Background */}

{items.map((item) => { const isSelected = selected === item.id return ( { if (el) buttonRefs.current.set(item.id, el) else buttonRefs.current.delete(item.id) }} type="button" role="tab" aria-selected={isSelected} aria-controls={`panel-${item.id}`} id={`tab-${item.id}`} tabIndex={isSelected ? 0 : -1} onClick={() => handleTabClick(item.id)} onKeyDown={(e) => handleKeyDown(e, item.id)} className={cn( "relative flex items-center justify-center gap-0.5 rounded-lg px-2 py-1.5", "text-sm font-medium transition-all duration-300", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", "truncate", isSelected ? "text-white" : "text-muted-foreground hover:bg-muted/50 hover:text-foreground", )} > {item.title} ) })}

) }86:["$","$L90",null,{"chatId":"P6oQQ3iUwIz","children":["$","$L91",null,{"data":{"@\"active-block\",\"P6oQQ3iUwIz\",":{"id":"b_yVQXeD4iHqA","messageId":"N4iLpowe1MYoRpFkSFWrSBlutf4yCTJJ","source":"$92","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"Open in v0","type":"code-project","project":"Open in v0"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"P6oQQ3iUwIz\",":false,"":null},"children":"$L93"}]}]

About

Tags

Share

About

Tags

Share

More from kokonut

More Templates Like This